<template>
  <div class="rightContent">
    <!-- 有登陆状态 -->
    <div v-if="!Sign">
      <div class="mymess">
        <div class="mes">
          <img
            class="mylogo"
            :src="imageWebUrl + resumeImg"
            @error="$event.target.src = GLOBAL.defaultIconImg"
            alt=""
          />
          <div class="namePhone">
            <div class="name">
              <p>{{ this.$store.state.nickName }}</p>
              <!-- 性别 -->
              <!-- <img
                v-if="true"
                src="@/assets/image/employment/women.png"
                alt=""
              />
              <img v-else src="@/assets/image/employment/man.png" alt="" /> -->
            </div>
            <p class="phone">{{ $store.state.mobile }}</p>
          </div>
        </div>
        <div class="workIntention" v-if="$store.state.resumeNo && resumeState">
          <p>求职意向：{{ tradeName }}</p>
          <p>期望城市：{{ city }}</p>
        </div>
        <div class="noIntention" v-if="!resumeState">
          <a-icon type="info-circle" />
          <p>
            您还没有填写的求职信息，暂不可申请职位,快去上传简历，增加投递成功率吧
          </p>
        </div>
        <p class="changemess" @click="$router.push('/MyResume')">
          {{ resumeState ? "完善简历" : "编辑简历" }}
        </p>
      </div>
      <!-- 投递职位、收藏职位 -->
      <div class="rightTitle" :class="{ haveMall: PositionData.length }">
        <div class="tabTitle">
          <!-- 简历隐藏 -->
          <p
            @click="
              (e) => {
                tab(e, 1);
              }
            "
            class="tab active"
          >
            投递职位
          </p>
          <p
            @click="
              (e) => {
                tab(e, 2);
              }
            "
            class="tab"
          >
            收藏职位
          </p>
        </div>

        <div
          class="mall"
          @click="$router.push('/personalCenter/myCollection?type=4')"
          v-show="PositionData.length"
        >
          <p>更多</p>
          <img src="@/assets/image/employment/mall.png" alt="" />
        </div>
      </div>
      <ul class="workList">
        <li v-for="(item, index) in PositionData" :key="index">
          <!-- 职位详情热区 -->
          <div
            @click="
              $router.push('/employment/positionDetail?jobCode=' + item.jobCode)
            "
          >
            <div class="workName">
              <p class="title">{{ item.name }}</p>
              <p class="maney">
                <template v-if="item.payType == 1">
                  {{ item.minPay
                  }}<span v-show="item.minPay && item.maxPay">K-</span
                  >{{ item.maxPay
                  }}<span v-show="item.minPay && item.maxPay">K</span>/月
                </template>
                <template v-else-if="item.payType == 2">
                  {{ item.maxPay }}元/日
                </template>
                <template v-else-if="item.payType == 3"> 面议 </template>
              </p>
            </div>
            <div class="nav">
              <p>{{ item.degree }}</p>
              <p class="hr" v-show="item.degree">｜</p>
              <p>{{ item.workExper }}</p>
              <p class="hr" v-show="item.workExper && item.disaType">｜</p>
              <p>{{ item.disaType }}</p>
            </div>
            <div class="workmsg" v-if="item.comCode">
              <img
                :src="imageWebUrl + item.comLogo"
                @error="$event.target.src = GLOBAL.defaultIconImg"
                alt=""
              />
              <div class="msg">
                <p class="title">{{ item.comName }}</p>
                <p class="navs">
                  {{ item.comNature }} <span v-show="item.comNature">|</span>
                  {{ item.comTrade }}
                  <span v-show="item.comTrade && item.scale">|</span>
                  {{ item.scale }}
                </p>
              </div>
            </div>
          </div>
          <!-- 相关热区 -->
          <p v-if="item.couseList.length" class="relevantclass">
            相关课程：<span
              @click="getJumpVideo(couseItem)"
              v-for="(couseItem, index) in item.couseList"
              :key="index + 'couse'"
              >{{ couseItem.name }}</span
            >
          </p>
          <!-- <p class="relevantclass" v-else>相关课程：无</p> -->
          <p class="policy" v-show="item.webUrl || item.webName">
            相关政策：
            <a
              @click.stop="toRescue(item.webUrl)"
              target="_blank"
              onclick="return fasle"
              v-if="item.policies == 1"
              >{{ item.webName }}</a
            >
            <span class="webName" v-else>{{ item.webName }}</span>
          </p>
        </li>
        <div
          class="noreject"
          v-if="PositionData.length == 0 && positionloginFlag"
        >
          <img src="@/assets/image/employment/nowork.png" alt="" />
          <p>快去看看有没有心仪的职位吧~</p>
        </div>
      </ul>
      <!-- 项目咨询、收藏项目 -->
      <div class="rightTitle" :class="{ haveMall: projectData.length }">
        <div class="tabTitle">
          <p
            @click="
              (e) => {
                tabs(e, 1);
              }
            "
            class="tab actives"
          >
            项目咨询
          </p>
          <p
            @click="
              (e) => {
                tabs(e, 2);
              }
            "
            class="tab"
          >
            收藏项目
          </p>
        </div>
        <div
          class="mall"
          @click="
            $router.push(
              tabIndex == 1
                ? '/personalCenter/myRelevant'
                : '/personalCenter/myCollection?type=5'
            )
          "
          v-show="projectData.length"
        >
          <p>更多</p>
          <img src="@/assets/image/employment/mall.png" alt="" />
        </div>
      </div>
      <ul class="rejectList">
        <li
          v-for="(item, index) in projectData"
          :key="index"
          v-show="item"
          @click="$router.push('/employment/projectDetail?id=' + item.itemNo)"
        >
          <div class="top">
            <img :src="imageWebUrl + item.photo" alt="" />
            <div class="xmMsg">
              <p class="name">{{ item.itemName }}</p>
              <p class="views">
                {{
                  item.consultNumber == null ? 0 : item.consultNumber
                }}人已了解
              </p>
            </div>
          </div>
          <!-- <p class="title">{{ item?item.itemName:'' }}</p>
          <div class="navs" v-if="item">
            <div v-for="i in item.labelList" :key="i + 'saw'" class="titlenav">
              <div>{{ i.name ? i.name : i }}</div>
            </div>
            <p v-for="(i, j) in item.labelList" :key="j">{{ i.name?i.name:i }}</p>
          </div> -->
          <!-- <p class="time">2021.10.23 - 11.11</p> -->
        </li>
        <div class="noreject" v-show="!projectData.length && projectFlag">
          <img src="@/assets/image/employment/noxiangmu.png" alt="" />
          <p>
            没有内容啊，去了解<span
              @click="$router.push('/employment/projectList')"
              >创业项目</span
            >
          </p>
        </div>
      </ul>
      <!-- 推荐职位 -->
      <div
        class="rightTitle"
        :class="{ haveMall: urgent.totalPage > urgent.pageSize }"
      >
        <div class="title">
          <img src="@/assets/image/employment/workicon.png" alt="" />
          <p>推荐职位</p>
        </div>
        <div
          class="func"
          @click="getListData(6)"
          v-show="urgent.totalPage > urgent.pageSize"
        >
          <p>换一批</p>
          <img
            :class="{ rotateActive: urgent.loadding }"
            src="@/assets/image/employment/refresh.png"
            alt=""
          />
        </div>
      </div>
      <ul class="workList">
        <li
          @click="
            $router.push('/employment/positionDetail?jobCode=' + item.jobCode)
          "
          v-for="(item, index) in UrgentJobData"
          :key="index"
        >
          <div class="workName">
            <p class="title">{{ item.name }}</p>
            <p class="maney">
              <template v-if="item.payType == 1">
                {{ item.minPay
                }}<span v-show="item.minPay && item.maxPay">K-</span
                >{{ item.maxPay
                }}<span v-show="item.minPay && item.maxPay">K</span>/月
              </template>
              <template v-else-if="item.payType == 2">
                {{ item.maxPay }}元/日
              </template>
              <template v-else-if="item.payType == 3"> 面议 </template>
            </p>
          </div>
          <div class="nav">
            <p>{{ item.degree }}</p>
            <p class="hr" v-show="item.degree">｜</p>
            <p>{{ item.workExper }}</p>
            <p class="hr" v-show="item.workExper && item.disaType">｜</p>
            <p>{{ item.disaType }}</p>
          </div>
          <div class="workmsg" v-if="item.comCode">
            <img
              :src="imageWebUrl + item.comLogo"
              @error="$event.target.src = GLOBAL.defaultIconImg"
              alt=""
            />
            <div class="msg">
              <p class="title">{{ item.comName }}</p>
              <p class="navs">
                {{ item.comNature }} <span v-show="item.comNature">|</span>
                {{ item.comTrade }}
                <span v-show="item.comTrade && item.scale">|</span>
                {{ item.scale }}
              </p>
            </div>
          </div>
          <p v-if="item.couseList.length" class="relevantclass">
            相关课程：<span
              v-for="(couseItem, index) in item.couseList"
              :key="index + 'couse'"
              >{{ couseItem.name }}</span
            >
          </p>
          <p class="policy" v-show="item.webUrl || item.webName">
            相关政策：
            <a
              @click.stop="toRescue(item.webUrl)"
              target="_blank"
              onclick="return fasle"
              v-if="item.policies == 1"
              >{{ item.webUrl }}</a
            >
            <span class="webName" v-else>{{ item.webName }}</span>
          </p>
        </li>
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 68px auto"
          v-if="UrgentJobData.length < 1"
        />
      </ul>
    </div>

    <!-- 未登录状态的右侧 -->
    <div v-if="Sign">
      <!-- 急招岗位和推荐岗位 -->
      <div
        class="rightTitle"
        :class="{ haveMall: urgent.totalPage > urgent.pageSize }"
      >
        <div class="title">
          <img src="@/assets/image/employment/workicon.png" alt="" />
          <p>急招职位</p>
        </div>
        <div
          class="func"
          @click="getListData(5)"
          v-show="urgent.totalPage > urgent.pageSize"
        >
          <p>换一批</p>
          <img
            :class="{ rotateActive: urgent.loadding }"
            src="@/assets/image/employment/refresh.png"
            alt=""
          />
        </div>
      </div>
      <ul class="workList">
        <li v-for="(item, index) in UrgentJobData" :key="index">
          <div
            class="workName"
            @click="
              $router.push('/employment/positionDetail?jobCode=' + item.jobCode)
            "
          >
            <p class="title">{{ item.name }}</p>
            <p class="maney">
              <template v-if="item.payType == 1">
                {{ item.minPay
                }}<span v-show="item.minPay && item.maxPay">K-</span
                >{{ item.maxPay
                }}<span v-show="item.minPay && item.maxPay">K</span>/月
              </template>
              <template v-else-if="item.payType == 2">
                {{ item.maxPay }}元/日
              </template>
              <template v-else-if="item.payType == 3"> 面议 </template>
            </p>
          </div>
          <div
            class="nav"
            @click="
              $router.push('/employment/positionDetail?jobCode=' + item.jobCode)
            "
          >
            <p>{{ item.degree }}</p>
            <p class="hr">｜</p>
            <p>{{ item.workExper }}</p>
            <p class="hr">｜</p>
            <p>{{ item.disaType }}</p>
          </div>
          <div
            class="workmsg"
            v-if="item.comCode"
            @click="
              $router.push('/employment/detailsBusiness?id=' + item.comCode)
            "
          >
            <img
              :src="imageWebUrl + item.comLogo"
              @error="$event.target.src = GLOBAL.defaultIconImg"
              alt=""
            />
            <div
              class="msg"
              @click="
                $router.push('/employment/detailsBusiness?id=' + item.comCode)
              "
            >
              <p class="title">{{ item.comName }}</p>
              <p class="navs">
                {{ item.comNature }} <span v-show="item.comNature">|</span>
                {{ item.comTrade }}
                <span v-show="item.comTrade && item.scale">|</span>
                {{ item.scale }}
              </p>
            </div>
          </div>
          <p v-if="item.couseList.length" class="relevantclass">
            相关课程：<span
              v-for="(couseItem, index) in item.couseList"
              :key="index + 'couse'"
              @click="getJumpVideo(couseItem)"
              >{{ couseItem.name }}</span
            >
          </p>
          <p class="policy" v-show="item.webUrl || item.webName">
            相关政策：
            <a
              @click.stop="toRescue(item.webUrl)"
              target="_blank"
              onclick="return fasle"
              v-if="item.policies == 1"
              >{{ item.webUrl }}</a
            >
            <span class="webName" v-else>{{ item.webName }}</span>
          </p>
        </li>
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 68px auto"
          v-if="UrgentJobData.length < 1"
        />
      </ul>
      <!-- 热门创业项目 -->
      <div
        class="rightTitle"
        :class="{ haveMall: hotProject.total > hotProject.pageSize }"
      >
        <div class="title">
          <img src="@/assets/image/employment/hotproject.png" alt="" />
          <p>热门创业项目</p>
        </div>
        <div
          class="func"
          @click="HotProjictList"
          v-show="hotProject.total > hotProject.pageSize"
        >
          <p>换一批</p>
          <img
            :class="{ rotateActive: hotProject.loadding }"
            src="@/assets/image/employment/refresh.png"
            alt=""
          />
        </div>
      </div>
      <ul class="rejectList">
        <li
          @click="$router.push('/employment/projectDetail?id=' + item.itemNo)"
          v-for="(item, index) in hotProjectList"
          :key="index"
        >
          <div class="top">
            <img :src="imageWebUrl + item.photo" alt="" />
            <div class="xmMsg">
              <p class="name">{{ item.itemName }}</p>
              <p class="views">{{ item.consultNumber }}人已了解</p>
            </div>
          </div>
          <!-- <p class="help">扶持政策：<span>{{}}</span></p> -->
          <!-- <p class="title">
            {{ item.itemName }}
          </p>
          <div class="navs" v-if="item.labels.length">
            <div v-for="i in item.labels" :key="i + 'saw'" class="titlenav">
              <div>{{ i }}</div>
            </div>
          </div> -->
          <!-- <p class="time">2021.10.23 - 11.11</p> -->
        </li>
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 68px auto"
          v-if="hotProjectList.length < 1"
        />
      </ul>
    </div>
    <!-- 推荐课程 -->
    <div class="rightTitle" :class="{ haveMall: pushCurriculum.length }">
      <div class="title">
        <img src="@/assets/image/employment/class.png" alt="" />
        <p>{{ $store.state.token ? "您可能感兴趣的课程" : "推荐课程" }}</p>
      </div>
      <div
        class="mall"
        v-show="pushCurriculum.length"
        @click="$router.push('/education/oLcurriculumList')"
      >
        <p>更多</p>
        <img src="@/assets/image/employment/mall.png" alt="" />
      </div>
    </div>
    <ul class="hotclass">
      <li
        v-for="(item, indes) in pushCurriculum"
        :key="indes"
        @click="getJumpVideo(item)"
      >
        <div class="classmsg">
          <div class="img">
            <img
              :src="imageWebUrl + item.cover"
              @error="$event.target.src = GLOBAL.defaultCover"
              alt=""
            />
          </div>
          <div class="massage">
            <p class="title" style="width: 160px; overflow: hidden">
              {{ item.name }}
            </p>
            <!-- <p class="navs" v-show="item.labels[0]">{{ item.labels[0] }}</p> -->
            <p class="view">{{ item.learnNumber }}人已学习</p>
            <p class="price">{{ item.cost ? item.cost : "免费" }}</p>
          </div>
        </div>
        <p class="policy" v-show="item.webName">
          相关政策：<span>{{ item.webName }}</span>
        </p>
      </li>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 68px auto"
        v-if="pushCurriculum.length < 1"
      />
    </ul>
  </div>
</template>

<script>
import {
  apiDeliveryList,
  apiRecomList,
  apiUrgentJobList,
} from "@/api/employment";
export default {
  data() {
    return {
      resumeState: false, // 是否简历完善成功
      resumeImg: "", //  简历头像
      tradeName: "", //  期望行业
      city: "", // 期望城市
      tabIndex: 1,
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      Sign: true,
      PositionData: [], // 投递职位和收藏职位
      projectData: [], // 项目咨询和收藏项目
      UrgentJobData: [], // 急招岗位和推荐岗位
      pushCurriculum: [], //推荐课程
      hotProjectList: [], //热门项目列表
      urgent: {
        // 急招/推荐
        totalPage: 1,
        pageIndex: 0,
        pageSize: 3,
        loadding: false,
      },
      hotProject: {
        // 热门项目
        total: 0,
        pageIndex: 1,
        pageSize: 2,
        loadding: false,
      },
      projectFlag: false,
      positionFlag: false,
      positionloginFlag: false,
    };
  },
  methods: {
    // 跳转视频播放页
    getJumpVideo(e) {
      this.$router.push(
        "/video/detailsVideo?courseNo=" +
          e.courseNo +
          "&learnedTime=" +
          e.learnedTime
      );
    },
    // 相关政策外链跳转
    toRescue(url) {
      window.open(url, "_blank");
    },
    tab(e, type) {
      this.PositionData = [];
      this.getListData(type);
      document.querySelector(".active").classList.remove("active");
      e.target.classList.add("active");
    },
    tabs(e, type) {
      this.tabIndex = type;
      this.projectFlag = false;
      this.projectData = [];
      document.querySelector(".actives").classList.remove("actives");
      e.target.classList.add("actives");
      if (type == 1) {
        this.$ajax({
          url: "/user/useritem/list?pageSize=3&pageIndex=1",
          method: "post",
        }).then((res) => {
          this.projectFlag = true;
          if (res.code == 200) {
            this.projectData = res.data.list;
          } else {
            this.projectData = [];
          }
        });
      } else if (type == 2) {
        this.$ajax({
          url: "/user/usercollect/list?type=5&pageSize=3&pageIndex=1",
          method: "post",
        }).then((res) => {
          this.projectFlag = true;
          if (res.code == 200) {
            this.projectData = res.data.list;
          } else {
            this.projectData = [];
          }
        });
      }
    },
    getProjectList() {
      this.$ajax({
        url: "/user/useritem/list?pageSize=3&pageIndex=1",
        method: "post",
      }).then((res) => {
        this.projectFlag = true;
        if (res.code == 200) {
          this.projectData = res.data.list;
        } else {
          this.projectData = [];
        }
      });
    },
    // 人们项目  换一批
    HotProjictList() {
      if (
        this.hotProject.total &&
        this.hotProject.pageIndex != 1 &&
        this.hotProject.total <=
          this.hotProject.pageIndex * this.hotProject.pageSize
      ) {
        this.hotProject.pageIndex = 1;
        this.hotProject.loadding = true;
        this.getHotProjictList();
      } else if (
        this.hotProject.total &&
        this.hotProject.total >
          this.hotProject.pageIndex * this.hotProject.pageSize
      ) {
        this.hotProject.pageIndex += 1;
        this.hotProject.loadding = true;
        this.getHotProjictList();
      }
    },
    // 获取热门创业项目
    getHotProjictList() {
      this.$ajax({
        url:
          "/entrepreneurial/iteminfo/list/home?pageIndex=" +
          this.hotProject.pageIndex +
          "&pageSize=" +
          this.hotProject.pageSize,
        method: "post",
      }).then((res) => {
        this.hotProject.loadding = false;
        if (res.code == 200) {
          this.hotProject.total = res.data.totalCount;
          this.hotProjectList = res.data.list;
        }
      });
    },
    // 请求数据
    async getListData(type) {
      this.positionFlag = false;
      // type=1  投递职位  5.未登录急招岗位   6.登录下推荐岗位
      if (type == 1) {
        // 投递职位
        const res = await apiDeliveryList();
        this.positionFlag = true;
        this.positionloginFlag = true;

        if (res.data.totalCount > 0) {
          this.PositionData = res.data.list;
        } else {
          this.PositionData = [];
        }
      }

      if (type == 2) {
        this.positionloginFlag = false;
        // 收藏职位
        this.$ajax({
          url: "/user/usercollect/list?type=4&pageSize=2&pageIndex=1",
          method: "post",
        }).then((res) => {
          this.positionloginFlag = true;
          this.positionFlag = true;
          if (res.code == 200) {
            this.PositionData = res.data.list;
          } else {
            this.PositionData = [];
          }
        });
      }

      if (type == 5 || type == 6) {
        this.urgent.loadding = true; //换一批动画
        if (this.urgent.pageIndex < this.urgent.totalPage) {
          this.urgent.pageIndex = this.urgent.pageIndex + 1;
        } else {
          this.urgent.pageIndex = 1;
        }
        if (type == 5) {
          // 5.急招职位 -- 未登录
          var res = await apiUrgentJobList({
            pageIndex: this.urgent.pageIndex,
            pageSize: this.urgent.pageSize,
          });
          this.positionFlag = true;
        } else if (type == 6) {
          // 6.推荐职位 -- 登录
          var res = await apiRecomList({
            pageIndex: this.urgent.pageIndex,
            pageSize: this.urgent.pageSize,
          });
          this.positionFlag = true;
        }
        this.urgent.loadding = false;
        // console.log(res.data);
        if (res.data.totalCount > 0) {
          this.UrgentJobData = res.data.list;
          // console.log(this.UrgentJobData);
          this.urgent.totalPage = res.data.totalPage;
        } else {
          this.UrgentJobData = [];
          this.urgent.totalPage = 0;
        }
      }
    },
    // 推荐课程
    selpushCurriculum() {
      this.$ajax({
        url: "/educational/courseinfo/list/recommend?pageSize=3&pageIndex=1",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.pushCurriculum = res.data.list;
        }
      });
    },
    // 查询我的
    selMydata() {
      this.$ajax({
        url: "/user/userinfo/info/detail",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          // 先判断登录状态，有则
          if (res.data.disaAuthFlag === "Y") {
            // 取消无登录状态
            this.Sign = false;
          }
        } else {
          return false;
        }
      });
    },
    getSumeInfo() {
      this.$ajax({
        url: "/entrepreneurial/resumeinfo/resumeInfo",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          if (
            res.data &&
            res.data.phone &&
            res.data.jobIntenList &&
            res.data.jobIntenList.length
          ) {
            // 如果有简历编码 》 投递简历
            this.resumeState = true;
            this.resumeImg = res.data.imgCode;
            this.tradeName = res.data.jobIntenList[0].tradeName
              .split("/")
              .pop();
            this.city = res.data.jobIntenList[0].workAddress;
          } else {
            this.resumeState = false;
          }
        }
      });
    },
  },
  mounted() {
    this.$store.state.onLoading = false;
    // 查询登录状态
    // 先判断登录状态，有则
    if (this.$store.state.token != "" && this.$store.state.roleType == 2) {
      // 取消无登录状态
      this.Sign = false;
      this.getSumeInfo();
      this.selMydata();
      this.getListData(6); // 登录下查询推荐岗位//
      this.getProjectList();
      // <!-- 简历隐藏 -->
      this.getListData(1); // 首次默认查询投递职位 1投递职位   2 收藏职位
    } else {
      this.getListData(5); // 未登录下查询急招岗位
    }
    // 查询推荐课程
    this.selpushCurriculum();
    this.getHotProjictList();
  },
};
</script>

<style scoped lang="less">
.rightContent {
  padding-bottom: 45px;
  .noreject {
    display: flex;
    flex-direction: column;
    img {
      width: 100px;
      height: 88px;
      margin: 0 auto;
      margin-top: 72px;
    }
    p {
      margin-top: 13px;
      margin-bottom: 83px;
      text-align: center;
      color: #333333;
      font-size: 14px;
      line-height: 20px;
      span {
        color: #fb6d00;
        cursor: pointer;
      }
    }
  }
  .mymess {
    margin-bottom: 10px;
    padding: 0 16px;
    .mes {
      display: flex;
      align-items: center;
      .mylogo {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: #adadad 1px solid;
      }
      .namePhone {
        flex: 1;
        padding-left: 24px;
        .name {
          display: flex;
          align-items: center;
          p {
            color: #333333;
            font-size: 16px;
            line-height: 22px;
            font-weight: bold;
            font-family: PingFang SC;
          }
          img {
            width: 16px;
            height: 16px;
            margin-left: 40px;
          }
        }
        .phone {
          margin-top: 8px;
          color: #666666;
          font-size: 12px;
          line-height: 17px;
        }
      }
    }
    .workIntention {
      margin-top: 16px;
      display: flex;
      p {
        color: #333333;
        font-size: 12px;
        line-height: 17px;
        margin-right: 40px;
      }
    }
    .noIntention {
      margin-top: 16px;
      display: flex;
      i {
        color: #ffbe37;
        margin-top: 2px;
      }
      p {
        padding-left: 3px;
        padding-right: 10px;
        color: #666666;
        font-size: 13px;
        line-height: 18px;
      }
    }
    .changemess {
      cursor: pointer;
      margin: 0 auto;
      width: 258px;
      height: 34px;
      margin-top: 24px;
      margin-bottom: 30px;
      text-align: center;
      line-height: 34px;
      border: 1px solid #ffbe37;
      color: #ffbe37;
      font-size: 13px;
    }
  }
  .haveMall {
    background-image: url("~@/assets/image/mallback.jpg");
    background-size: 100% 100%;
  }
  .rightTitle {
    width: 100%;
    height: 40px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    background-color: #232d32;
    justify-content: space-between;
    padding: 0 24px 0 16px;
    .tabTitle {
      width: 60%;
      display: flex;
      p {
        font-family: PingFang SC;
      }
      p:nth-child(2) {
        margin-left: 16px;
      }
    }
    .title {
      display: flex;
      align-items: center;
      img {
        width: 18px;
        height: 18px;
        margin-right: 8px;
      }
      p {
        color: #ffffff;
        font-size: 14px;
        line-height: 20px;
        font-weight: bold;
        font-family: PingFang SC;
      }
    }
    .tab {
      display: flex;
      line-height: 40px;
      align-items: center;
      text-align: center;
      white-space: nowrap;
      cursor: pointer;
      font-size: 14px;
      color: #ffffff;
    }
    .active {
      color: #ffbe37;
      font-weight: bold;
      font-family: PingFang SC;
      background-image: url("~@/assets/image/employment/tabback.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 32px 2px;
    }
    .actives {
      color: #ffbe37;
      font-weight: bold;
      font-family: PingFang SC;
      background-image: url("~@/assets/image/employment/tabback.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 32px 2px;
    }
    .func {
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 10px;
        height: 10px;
        margin-left: 6px;
        margin-right: -10px;
      }
      p {
        color: #333333;
        font-weight: bold;
        font-family: PingFang SC;
        font-size: 12px;
        line-height: 17px;
      }
      .rotateActive {
        -webkit-transform: rotate(360deg);
        animation: rotation 1s linear infinite;
        -moz-animation: rotation 1s linear infinite;
        -webkit-animation: rotation 1s linear infinite;
        -o-animation: rotation 1s linear infinite;
      }
      @-webkit-keyframes rotation {
        from {
          -webkit-transform: rotate(0deg);
        }
        to {
          -webkit-transform: rotate(360deg);
        }
      }
    }
    .mall {
      display: flex;
      align-items: center;
      color: #333333;
      font-size: 12px;
      cursor: pointer;
      p {
        font-weight: bold;
        font-family: PingFang SC;
        margin-right: 5px;
        font-size: 12px;
      }
      i {
        // margin-top: -2px;
      }
    }
  }
  .rightTitle:first-child {
    margin: 0;
  }
  .workList {
    padding: 16px;
    li {
      cursor: pointer;
      padding-top: 16px;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #eeeeee;
      .workName {
        display: flex;
        justify-content: space-between;
        .title {
          color: #333333;
          font-size: 15px;
          line-height: 21px;
          font-weight: 800;
          font-family: PingFang SC;
        }
        .maney {
          color: #ffbe37;
          font-size: 16px;
          line-height: 22px;
          font-weight: bold;
          font-family: PingFang SC;
          font-weight: 600;
        }
      }
      .nav {
        display: flex;
        margin-top: 16px;
        p {
          color: #666666;
          font-size: 12px;
          line-height: 17px;
        }
        .hr {
          margin: 0 7px;
        }
      }
      .workmsg {
        margin-top: 16px;
        display: flex;
        align-items: center;
        img {
          width: 50px;
          height: 50px;
        }
        .msg {
          flex: 1;
          padding-left: 16px;
          .title {
            color: #000000;
            font-size: 13px;
            line-height: 18px;
          }
          .navs {
            margin-top: 10px;
            color: #999999;
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
      .relevantclass,
      .policy {
        margin-top: 16px;
        color: #000000;
        font-size: 14px;
        line-height: 17px;
        span {
          color: #0d4fae;
          text-decoration: underline;
        }
        a {
          color: #0d4fae;
          text-decoration: underline;
        }
        .webName {
          text-decoration: none;
          color: #333333;
        }
      }
      .policy {
        margin-top: 8px;
      }
    }
    li:last-child {
      border: 0;
      padding-bottom: 8px;
    }
  }
  .rejectList {
    padding: 8px 16px;
    min-height: 100px;
    li {
      cursor: pointer;
      padding: 25px 0;
      border-bottom: 1px solid #eeeeee;
      .top {
        display: flex;
        img {
          width: 120px;
        }
        .xmMsg {
          margin-left: 20px;
          .name {
            font-weight: bold;
            font-family: PingFang SC;
            color: #333333;
            font-size: 15px;
            line-height: 21px;
          }
          .views {
            margin-top: 25px;
            color: #232d32;
            font-size: 13px;
            line-height: 18px;
          }
        }
      }
      .title {
        color: #333333;
        font-size: 15px;
        line-height: 21px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .navs {
        margin-top: 8px;
        display: flex;
        p {
          border-radius: 12px;
          padding: 0 15px;
          border: 1px solid #ffbe37;
          line-height: 24px;
          color: #ffbe37;
          margin-right: 16px;
          font-size: 12px;
        }
      }
      .time {
        margin-top: 9px;
        color: #666666;
        font-size: 14px;
        line-height: 20px;
      }
    }
    li:last-child {
      border: 0;
    }
  }
  .hotclass {
    padding: 0 22px;
    li {
      cursor: pointer;
      padding: 30px 0;
      border-bottom: 1px solid #eeeeee;
      .classmsg {
        display: flex;
        .img {
          width: 112px;
          height: 77px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            transition: transform 0.5s linear;
          }
        }
        .img:hover {
          img {
            transform: scale(1.1);
          }
        }
        .massage {
          flex: 1;
          padding-left: 16px;
          .title {
            font-weight: bold;
            font-family: PingFang SC;
            color: #333333;
            font-size: 15px;
            line-height: 21px;
            padding-top: 3px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .navs {
            margin-top: 8px;
            border: 1px solid #ffbe37;
            width: 78px;
            height: 23px;
            text-align: center;
            line-height: 21px;
            border-radius: 10.5px;
            color: #ffbe37;
            font-size: 12px;
          }
          .price {
            margin-top: 12px;
            color: #ca0000;
            font-size: 15px;
          }
          .view {
            margin-top: 6px;
            color: #666666;
            font-size: 15px;
            line-height: 17px;
          }
        }
      }
      .policy {
        margin-top: 8px;
        color: #000000;
        font-size: 12px;
        line-height: 17px;
        span {
          color: #0d4fae;
          text-decoration: underline;
        }
      }
    }
    li:last-child {
      border: 0;
    }
  }
}
/deep/p {
  font-family: PingFang SC !important;
}
</style>
